import VirtualizedTable from "../../packages/virtualized-table";
import TableColumn from "../../packages/table/src/table-column";
import "../../packages/theme-chalk/src/index.scss";

describe("VirtualizedTable", () => {
  it("Header和body 边框不错位", () => {
    const Demo = {
      name: "Demo",
      data() {
        return {
          tableData: Array.from({ length: 300 }).map((_, index) => {
            return {
              id: Math.round(Math.random() * 10000) + index,
            };
          }),
          columns: Array.from({ length: 30 }).map((_, index) => {
            return {
              prop: "id",
              label: `ID${index}`,
            };
          }),
        };
      },
      template: `
        <div  class='table-wrapper' style='width: 600px; height: 420px; overflow: auto'>
          <virtualized-table border :height="260" :data="tableData" :virtualOptions="{ itemSize: 28 }">
            <table-column v-for="item in columns" :prop="item.prop" :key="item.label" :label="item.label"></table-column>
          </virtualized-table>
        </div>
      `,
    };

    cy.mount(Demo, {
      stubs: {
        "virtualized-table": VirtualizedTable,
        "table-column": TableColumn,
      },
    });

    cy.wait(15)
    cy.get(".z-table__header")
      .invoke("width")
      .then((headerWidth) => {
        cy.get(".z-table__body")
          .invoke("width")
          .then((bodyWidth) => {
            console.log(bodyWidth, headerWidth)
            expect(bodyWidth - headerWidth).equal(-15);
          });
      });
    
    cy.get('.z-table__body-wrapper').scrollTo('right')
    cy.wait(100)
    cy.get('.z-table__header-wrapper .cell:nth(3)').then($el => {
      const { left: headerCellLeft } = $el[0].getBoundingClientRect()
      cy.get('.z-table__body-wrapper .cell:nth(3)').then($bodyCell => {
        const { left: bodyCellLeft } = $bodyCell[0].getBoundingClientRect()
        expect(headerCellLeft).equal(bodyCellLeft)
      })
    })
  });
});
